<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入库单详情 - {{ document_number }}</title>
    <style>
 body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

h1 {
    text-align: center;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

thead {
    background-color: #f2f2f2;
}

img.product-img {
    cursor: pointer;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

.close {
    color: #fff;
    position: absolute;
    top: 15px;
    right: 35px;
    font-size: 40px;
    font-weight: bold;
}

@media only screen and (max-width: 600px) {
    table {
        font-size: 12px;
    }
}
    </style>
</head>

<body>
{% if products %}
<h1>入库单详情 - {{ document_number }}</h1>
<ul>
    <li><p>客户：{{ customer_info[0][1] }}</p></li>
    <li><p>单据编号：{{ document_number }}</p></li>
    <li><p>单据日期：{{ entry_info[0][2] }}</p></li>

</ul>
<table>
    <thead>
    <tr>
        <th>产品图片</th>
        <th>产品ID</th>
        <th>产品名称</th>
        <th>规格型号</th>
        <th>颜色</th>
        <th>数量</th>
        <th>计量单位</th>
        <th>采购价格</th>
    </tr>
    </thead>
    <tbody>
    <!-- 填充产品数据 -->
    {% for product in products %}
    <tr>
        <td><img class="product-img" src="{{ url_for('static', filename=product[7]) }}" alt="Attachment Image" style="max-width: 100px;"
                 onclick="openModal()"></td>

        <td>{{product[0]}}</td>
        <td>{{product[1]}}</td>
        <td>{{product[2]}}</td>
        <td>{{product[3]}}</td>
        <td>{{product[4]}}</td>
        <td>{{product[5]}}</td>
        <td>{{product[6]}}</td>
    </tr>
    {% endfor %}
    </tbody>
</table>
{% endif %}

{% if attachments %}
<h3>附件信息：</h3>
<ul>
    {% for attachment in attachments %}
    <li>
        {% if attachment[0].endswith('.jpg') or attachment[0].endswith('.jpeg') or attachment[0].endswith('.png') %}
        <img src="{{ url_for('static', filename=attachment[0]) }}" alt="Attachment Image" style="max-width: 200px;" onclick="openModal()"><br>
        {% else %}
        <a href="{{ url_for('static', filename=attachment[0]) }}" download>{{ attachment[0].split('/')[-1] }}</a><br>
        {% endif %}
    </li>
    {% endfor %}
</ul>
{% endif %}

<!-- 模态框 -->
<div id="myModal" class="modal">
    <span class="close" onclick="closeModal()">&times;</span>
    <img id="img01" class="modal-content">
    <div id="caption"></div>
</div>

<script>
    function openModal() {
        document.getElementById('myModal').style.display = "block";
        document.getElementById('img01').src = event.target.src;
        document.getElementById('caption').innerHTML = event.target.alt;
    }

    function closeModal() {
        document.getElementById('myModal').style.display = "none";
    }
</script>
</body>

</html>
